<template>
  <div>
    <el-table
      size="small"
      :data="tableData"
      stripe
      border
      @sort-change="shortHandler"
    >
      <el-table-column
        type="index"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="参数名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="displayName"
        label="显示名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="unit"
        label="参数单位"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="description"
        label="参数描述"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createdAt"
        label="创建时间"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        prop="updateAt"
        label="更新时间"
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        v-if="userGuardList.includes(guard.DeviceParameterManage)"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            size="small"
            @click="showEdit(scope.row.id, scope.row.name, scope.row.displayName, scope.row.unit, scope.row.description)"
          >编辑</el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            size="small"
            @click="remove(scope.row.id, scope.row.name)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit
      ref="editComponent"
      @refresh="refresh"
    ></edit>
  </div>
</template>

<script>
import moment from 'moment';
import Edit from './edit';
import { SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import { deleteDeviceParameterApi } from '../../../api/deviceParameter';
import { parseError } from '../../../utils';

export default {
  components: {
    Edit
  },
  model: {
    prop: 'sort'
  },
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    sort: {
      type: Object,
      default() {
        return {
          sortType: SortType.DESC
        };
      }
    }
  },
  methods: {
    showEdit(id, name, displayName, unit, description) {
      this.$refs.editComponent.showDialog(id, name, displayName, unit, description);
    },
    remove(id, name) {
      MessageBox.confirm(`确定删除设备参数${name}吗？`, '删除提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          deleteDeviceParameterApi(id)
            .then(() => Message.success('删除设备参数成功'))
            .catch(error => Message.error(parseError(error)))
            .finally(() => this.$emit('search'));
        })
        .catch(() => {});
    },
    refresh() {
      this.$emit('search');
    },
    shortHandler({ order, prop }) {
      this.sort.sortType = order === 'ascending' ? SortType.ASC : SortType.DESC;
      this.$emit('search');
    }
  }
};
</script>
